/**
 * Created by willem
 */
import './index.scss';
import 'flipclock/dist/flipclock.css';
import { PureComponent } from 'react';
import FlipClock from 'flipclock/dist/flipclock';
import T from 'utils/T';
import { MainHeader, MainContent } from 'templates/MainLayout/MainLayout';
import {} from 'antd';

export default class Flip extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        let clock = new FlipClock(this.clock, 100, {

            // Create a minute counter
            clockFace: 'Counter',
            autoStart: true,


            // The onStart callback
            onStart: function () {
                // Do something
            },

            // The onStop callback
            onStop: function () {
                // Do something
            },

            // The onReset callback
            onReset: function () {
                // Do something
            }
        });
    }


    render() {
        const getFlipNum = (num) => {
            let initNum = '0';
            let stringArr = [];
            if (T.lodash.isNumber(num) || T.lodash.isString(num)) {
                initNum = String(num);
            }
            for (let i = 0; i < initNum.length; i++) {
                stringArr.push(initNum.slice(i, i + 1));
            }
            console.log(stringArr);
            return stringArr.map((item, index) => (<li key={index}><span>{item}</span></li>));
        };
        return (
            <div>
                <div className={'your-clock'} ref={self => this.clock = self} />
                <div>
                    <ul className={'flipNumBox'}>
                        {
                            getFlipNum(23423424223424)
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

